<template>
	<a-layout>
		<a-layout-sider class="sider" width="220">
			<a-tree v-model:selectedKeys="selectedKeys" key="" :tree-data="treeData" show-icon :defaultExpandAll="false" @select="onSelect" v-if="treeData.length > 0" class="menu">
				<template #icon="{ data }">
					<component :is="$Icons[data.menu_icon]" />
				</template>
			</a-tree>
		</a-layout-sider>
		<a-layout>
			<a-layout-content>
				<div style="padding-left: 100px">
					<!-- <a-typography-title :level="2">{{ optName }}</a-typography-title> -->
				</div>
				<div style="padding-left: 100px; padding-top: 15px">
					<a-button type="primary" size="small" @click="fun_addChildren(treeKey)" :disabled="btn_disabled">
						<template #icon>
							<plus-outlined />
						</template>
						子级
					</a-button>
					<a-button type="primary" size="small" @click="fun_addBrother(treeKey)" style="margin-left: 10px">
						<template #icon>
							<plus-outlined />
						</template>
						平级
					</a-button>
					<a-button type="primary" size="small" @click="fun_del(treeKey)" danger style="margin-left: 10px">
						<template #icon>
							<delete-outlined />
						</template>
						删除
					</a-button>
				</div>
				<div style="width: 600px; margin-top: 20px">
					<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" @finish="onFinish">
						<template v-for="item in columns" :key="item.dataIndex">
							<a-form-item :label="item.title" :name="item.dataIndex" :rules="[{ required: true, message: '必填!' }]">
								<icon v-if="item.dataIndex.indexOf('icon') > -1" v-model:value="formState[item.dataIndex]"></icon>
								<a-input v-else v-model:value="formState[item.dataIndex]" :disabled="!item.edit" />
							</a-form-item>
						</template>
						<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
							<a-button type="primary" html-type="submit" style="width: 80px"> 提 交 </a-button>
						</a-form-item>
					</a-form>
				</div>
			</a-layout-content>
		</a-layout>
	</a-layout>
</template>

<script>
import icon from '@/components/Icon/icon-component.vue';

export default {
	props: {
		Config: {
			type: Object,
			defalut: {},
		},
	},
	components: {
		icon,
	},
	data() {
		return {
			labelCol: { style: { width: '100px' } },
			selectedKeys: [],
			treeData: [],
			formState: {},
			node: {},
			btn_disabled: true,
			optName: '编辑',

			columns: this.Config.columns,
			idName: this.Config.idName,
			pidName: this.Config.pidName,
			levelName: this.Config.levelName,
		};
	},
	mounted() {
		this.fun_getData();
		this.fun_Init();
	},
	methods: {
		/**
		 * @function 获取加载数据
		 */
		fun_getData() {
			var that = this;
			that.$http.post(this.Config.getTreeUrl, {}, that, function (ret) {
				that.treeData = ret.Data;
			});
		},
		/**
		 * @function 初始化行默认值
		 */
		fun_Init() {
			var that = this;
			that.formState = {};
			that.columns.forEach((elem, index) => {
				that.formState[elem.dataIndex] = elem.defaultVlue;
			});
		},
		/**
		 * @function 选中事件
		 * @param {*} selectedKeys 
		 * @param {*} event 
		 */
		onSelect(selectedKeys, event) {
			this.optName = '编辑';
			this.node = event.node;
			this.fun_Select(this.node);
		},
		/**
		 * @function 选中事件
		 */
		fun_Select(node) {
			this.optName = '编辑';
			this.columns.forEach((elem, index) => {
				this.formState[elem.dataIndex] = node[elem.dataIndex];
			});
			this.btn_disabled = node[this.levelName] > 1;
		},
		/**
		 * @function 添加子级节点
		 */
		fun_addChildren() {
			var that = this;
			this.optName = '添加子级';

			this.formState = {};
			this.formState[this.idName] = 0;
			this.formState[this.pidName] = this.node[this.idName];
			this.formState[this.levelName] = this.node[this.levelName] + 1;
		},
		/**
		 * @function 添加平级节点
		 */
		fun_addBrother() {
			var that = this;
			this.optName = '添加平级';

			this.formState = {};
			this.formState[this.idName] = 0;
			this.formState[this.pidName] = this.node[this.pidName];
			this.formState[this.levelName] = this.node[this.levelName];
		},
		/**
		 * @function 删除节点
		 * @param {*} treeKey 
		 */
		fun_del(treeKey) {
			var that = this;
			that.$http.post(this.Config.delUrl, { id: this.node[this.idName] }, that, function (ret) {
				that.fun_getData();
				that.$Message['success']({ background: true, duration: 1, content: '删除成功' });
			});
		},
		/**
		 * @function 重新加载目录
		 */
		onFinish() {
			var that = this;
			if (this.formState[this.idName] > 0) {
				that.$http.post(this.Config.editUrl, that.formState, that, function (ret) {
					that.fun_getData();
					that.$Message['success']({ background: true, duration: 1, content: '请求成功' });
				});
			} else {
				that.$http.post(this.Config.addUrl, that.formState, that, function (ret) {
					that.fun_getData();
					that.$Message['success']({ background: true, duration: 1, content: '请求成功' });
				});
			}
		},
	},
};
</script>

<style scoped>
.sider {
	padding-top: 10px;
	padding-left: 10px;
	box-sizing: border-box;
	background: #fff;
	border-right: 1px solid #f3f3f3;
	height: calc(100vh - 48px);
	bottom: 0px;
	border-right: 1px solid #dcdee2;
}
.sider .menu {
	overflow-y: auto;
	overflow-x: hidden;
	height: calc(100vh - 80px);
	bottom: 50px;
}
</style>
